<template>
  <div
    id="searchRes"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <section v-if="resData.length != 0">
      <radio_group01
        :radio_values="[
          '按观看人数峰值',
          '按本场音浪',
          '按销售额',
          '按开播时间',
        ]"
        v-model="KindName"
        class="tab01"
      />
      <table class="table">
        <thead>
          <tr>
            <th>直播间</th>
            <th>达人</th>
            <th>开播时间</th>
            <th>观看人数峰值</th>
            <th>本场音浪</th>
            <th>商品数</th>
            <th>直播销量（预估）</th>
            <th>直播销售额（预估）</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in resData" :key="index">
            <td>
              <div class="goodsBox" @click="toLiveDetails(item.roomId, '0')">
                <!-- <img :src="item.roomLogo" /> -->
                <div class="imgBox">
                  <img :src="item.roomLogo" />
                  <div class="liveBox" v-if="item.status == 1">
                    <p class="livingGif">
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </p>
                    <span class="liveText">直播中</span>
                  </div>
                </div>
                <div class="goodsRight">
                  <div>
                    <el-tooltip
                      effect="light"
                      :content="item.roomTitle"
                      :hide-after="2000"
                      placement="top"
                      popper-class="mytooltip"
                    >
                      <span>{{ item.roomTitle }}</span>
                    </el-tooltip>
                    <img
                      src="@/assets/meng/pop01.png"
                      v-if="item.isShop == 1"
                    />
                    <img
                      src="@/assets/meng/pop02.png"
                      v-if="item.isRed == 1"
                      class="redImg"
                    />
                  </div>
                  <p>
                    直播时长：{{
                      format_time((item.endUnix - item.beginUnx) * 1000)
                    }}
                  </p>
                </div>
              </div>
            </td>
            <td>
              <div class="talentBox">
                <img :src="item.logo" class="avatorImg" />
                <div class="talentRight">
                  <el-tooltip
                    effect="light"
                    :content="item.nickName"
                    :hide-after="2000"
                    placement="top"
                    popper-class="mytooltip"
                  >
                    <p>{{ item.nickName }}</p>
                  </el-tooltip>
                  <p>粉丝数：{{ format_num(item.totalFans) }}</p>
                </div>
              </div>
            </td>
            <td>
              <p>{{ timestamp(item.beginUnx, "Y-M-D") }}</p>
              <p>{{ timestamp(item.beginUnx, "h:m:s") }}</p>
            </td>
            <td>
              <p>{{ format_num(item.peoplePeak) }}</p>
              <p class="updating" v-if="item.status == 1">正在更新</p>
            </td>
            <td>
              <p>{{ format_num(item.soundbyte) }}</p>
              <p class="updating" v-if="item.status == 1">正在更新</p>
            </td>
            <td>
              <p v-if="item.isShop == 1">{{ format_num(item.liveproduct) }}</p>
              <p v-if="item.isShop == 1 && item.status == 1" class="updating">
                正在更新
              </p>
              <p v-if="item.isShop == 0">--</p>
            </td>
            <td>
              <p v-if="item.isShop == 1">{{ format_num(item.livevolume) }}</p>
              <p v-if="item.isShop == 1 && item.status == 1" class="updating">
                正在更新
              </p>
              <p v-if="item.isShop == 0">--</p>
            </td>
            <td>
              <p v-if="item.isShop == 1">{{ format_num(item.livesales) }}</p>
              <p v-if="item.isShop == 1 && item.status == 1" class="updating">
                正在更新
              </p>
              <p v-if="item.isShop == 0">--</p>
            </td>
            <td>
              <div
                class="detailsBtnwl"
                @click="toLiveDetails(item.roomId, '0')"
              >
                查看详情
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <div
      v-loading="loading"
      v-if="!(resData.length < (page - 1) * 20) && !permissions"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p
      class="nothing"
      v-show="resData.length != 0 && resData.length < (page - 1) * 20"
    >
      我是有底线的～
    </p>
    <div class="empty" v-show="!loading && resData.length == 0">
       <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
    <div class="toBuyWl" v-if="permissions">
      当前为免费版会员，仅可查看100个结果，立即<span @click="toBuy"
        >升级会员版本</span
      >，可查看更多数据
    </div>
  </div>
</template>

<script>
export default {
  name: "searchRes",
  components: {},
  data() {
    return {
      KindName: "按开播时间",
      cancel: null,
      resData: [],
      loading: true,
      busy: false,
      count: "",
      page: 1,
      permissions: false,
    };
  },
  computed: {},
  watch: {
    KindName: function (newVal, oldVal) {
      this.resData = [];
      this.page = 1;
      this.$store.commit("changeLiveSearch_page", this.page);
      this.searchLive();
    },
  },
  created() {
    this.searchLive();
  },
  mounted() {},

  methods: {
    loadMore() {
      this.searchLive();
    },
    searchLive() {
      let that = this;
      that.loading = true;
      that.permissions = false;
      that.busy = true;
      if (this.$store.state.liveSearchOptions == null) {
        this.$router.push({
          path: `/talent_main/liveSearchRoot`,
        });
        return false;
      }
      let sort;
      switch (that.KindName) {
        case "按观看人数峰值":
          sort = 1;
          break;
        case "按本场音浪":
          sort = 2;
          break;
        case "按销售额":
          sort = 3;
          break;
        case "按开播时间":
          sort = 0;
          break;
      }
      this.$store.commit("changeLiveSearch_sort", sort);
      that.$axios
        .post("/api/live/search", that.$store.state.liveSearchOptions, {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel != null) {
              that.cancel();
            }
            that.cancel = c;
          }),
        })
        .then((response) => {
          that.loading = false;
          if (response.data.code == 0) {
            that.count = response.data.count;
            that.page += 1;
            that.$store.commit("changeLiveSearch_page", that.page);
            that.resData = that.resData.concat(response.data.data);
            response.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
          } else if (response.data.code == 1003) {
            that.busy = true;
            that.permissions = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 跳直播详情
    toLiveDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/${tabNo}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳达人详情
    toTalentDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#searchRes {
  background: #fff;
  margin-left: 20px;
  margin-right: 20px;
  padding: 0 20px;
  margin-top: 20px;
  padding-top: 17px;
  position: relative;
  border-radius: 4px;
  height: fit-content;
  min-height: 100vh;
  .updating {
    width: 62px;
    height: 22px;
    line-height: 22px;
    background-color: #fff4ed;
    border-radius: 4px;
    font-size: 12px;
    color: #fd8a3e;
    text-align: center;
  }
  .tab01 {
    margin-top: 23px;
  }
  table {
    margin-top: 19px;
    text-align: center;
    box-sizing: border-box;
    thead {
      th {
        padding: 0 5px;
      }
      th:nth-child(1) {
        text-align: left;
        padding-left: 54px;
        width: 22%;
      }
      th:nth-child(2) {
        text-align: left;
        padding-left: 4.8%;
        width: 16%;
      }
    }
    tbody {
      tr {
        height: 160px;
        td:nth-of-type(3),
        td:nth-of-type(4),
        td:nth-of-type(5),
        td:nth-of-type(6),
        td:nth-of-type(7),
        td:nth-of-type(8) {
          font-family: DINAlternate-Bold;
          p {
            text-align: center;
            margin: 0 auto;
          }
        }
        td:nth-of-type(2) {
          padding-left: 4%;
        }
        // 商品
        .goodsBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 35px;
          cursor: pointer;
          .imgBox {
            width: 80px;
            height: 100px;
            border-radius: 4px;
            position: relative;
            border: 1px solid #e5e5e5;
            img {
              width: 80px;
              height: 100px;
              border-radius: 4px;
            }
            .liveBox {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 81px;
              height: 22px;
              background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
                linear-gradient(#ffffff, #ffffff);
              background-blend-mode: normal, normal;
              border-radius: 0px 0px 4px 4px;
              display: flex;
              justify-content: center;
              align-items: center;
              .liveText {
                font-weight: 600;
                font-size: 12px;
                color: #ffffff;
              }
            }
          }
          .goodsRight {
            flex: 1;
            margin-left: 23px;
            text-align: left;
            div {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              span {
                font-size: 16px;
                color: #222222;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
              img {
                width: 18px;
                height: 16px;
                margin-left: 6px;
              }
              .redImg {
                width: 13px;
              }
            }
            p {
              font-size: 14px;
              color: #888888;
              padding-top: 10px;
            }
          }
        }
        // 达人
        .talentBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          // cursor: pointer;
          .avatorImg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
          }
          .talentRight {
            flex: 1;
            text-align: left;
            margin-left: 20px;
            p:nth-of-type(1) {
              text-align: left;
              font-size: 16px;
              font-weight: 600;
              color: #222222;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            p:nth-of-type(2) {
              text-align: left;
              font-size: 14px;
              color: #555555;
            }
          }
        }
        .tdText01 {
          color: #222222;
          span {
            color: #1779ff;
          }
        }
      }
    }
  }
}
</style>